<template>
    <n-dropdown :options="options" @select="handleSelect">
        <n-icon :size="props.iconSize">
            <Language/>
        </n-icon>
    </n-dropdown>
</template>

<script setup lang='ts'>
import type { Component } from 'vue'
import {
    Language
} from '@vicons/ionicons5'
import { NIcon } from 'naive-ui'
import {  h } from 'vue';
import { useI18n } from "vue-i18n";
import { useAppStore } from '@/stores/app';
const appStore = useAppStore();

const props = defineProps<{
    iconSize: number
}>();
const i18n = useI18n();
function renderIcon(icon: Component) {
    return () => {
        return h(NIcon, null, {
            default: () => h(icon)
        })
    }
}

const options = [
    {
        label: '中文',
        key: 'zhCn',
        icon: renderIcon(Language)
    },
    {
        label: '英文',
        key: 'en',
        icon: renderIcon(Language)
    }
] as const; 

type OptionKeys = typeof options[number]['key'];
const handleSelect = (type:OptionKeys)=>{
    i18n.locale.value = type;
    appStore.setLangMode(type)
}
</script>
<style scoped lang='scss'></style>